<template>
  <div class="index">
    <Head title="我的微店"/>
    <div class="container">
      <!-- 店铺信息 -->
      <div class="shop_ban">
        <div class="shop_bg">
          <img src="../../static/image/myShop_bg.png" alt>
        </div>
        <div class="shop_message">
          <div class="shop_message_box">
            <div class="shop_message_box_left">
              <div class="shop_message_box_left_top">销售总额&nbsp;
                <div class="check">去提现></div>
              </div>
              <div class="shop_message_box_left_bot">
                ¥
                <span>{{store_info.store_sales_amount}}</span>
              </div>
            </div>
            <div class="line">
              <!-- 分割线 -->
            </div>
            <div class="shop_message_box_right">
              <div class="shop_message_box_right_list">
                <div class="shop_message_box_right_top">正在交易</div>
                <div class="shop_message_box_right_bot">¥{{store_info.store_saling_amount}}</div>
              </div>
              <div class="shop_message_box_right_list">
                <div class="shop_message_box_right_top">营销返利</div>
                <div class="shop_message_box_right_bot">¥{{store_info.store_yxfl_amount}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺信息 end -->
      <!-- 店铺logo以及店铺名称 -->
      <div class="shop">
        <div class="shop_box">
          <div class="shop_box_left">
            <img :src="store_info.store_logo" alt>
          </div>
          <div class="shop_box_right">
            <div class="shop_box_right_top">
              <span>{{store_info.store_name}}</span>
              <img src="../../static/image/vip_money.png" alt>
            </div>
            <div class="shop_box_right_bot">
              <div class="shop_box_right_bot_box">
                <span>销量{{store_info.store_sales_volume}}</span>&nbsp;&nbsp;&nbsp;
                <span>共{{store_info.store_goods_total}}件宝贝</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺logo以及店铺名称  end-->
      <!-- 功能列表 -->
      <ShopList/>
      <!-- 功能列表 end-->
      <!-- 升级企业店铺 -->
      <div class="bottom_lev">
        <div class="bottom_lev_box" @click="upShop">
          <img src="../../static/image/vip_qiye.png" alt>升级为企业店铺
        </div>
      </div>
      <!-- 升级企业店铺 end -->
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import ShopList from "@/components/ShopList";
export default {
  components: {
    Head,
    ShopList
  },
  data() {
    return {
      store_info: {}
    };
  },
  mounted() {
    this.getShopData();
  },
  methods: {
    // 获取店铺信息
    getShopData() {
      
      this.appJS.ajax(
        "user.get_store_info",
        "post",
        {
          store_id: this.$route.query.store_id
        },
        res => {
          console.log(res.data);
          this.appJS.setStorage('store_info',res.data.store_info);
          this.store_info = res.data.store_info;
        },this
      );
    },
    //升级店铺
    upShop() {
      this.$router.push({ path: "/Upshop" });
    }
  }
};
</script>

<style lang='less'>
.index {
  min-height: 100vh;
  background: #fff;
}
.shop_ban {
  height: 33.3333vw;
  width: 100%;
  position: relative;
  .shop_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .shop_message {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    .shop_message_box {
      height: 20vw;
      width: 100%;
      padding: 0 0.5rem;
      color: #fff;
      font-size: 0.7rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 1rem;
      .shop_message_box_left {
        width: calc(50% - 1px);
        .shop_message_box_left_top {
          font-size: 0.6rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .check {
            padding: 0.1rem 0.4rem;
            border: 1px solid #efefef;
            border-radius: 100px;
            .fontSize(0.5rem);
          }
        }
        .shop_message_box_left_bot {
          font-size: 0.6rem;
          margin-top: 0.2rem;
          span {
            font-size: 1rem;
            font-weight: 600;
            margin-left: 0.1rem;
          }
        }
      }
      .line {
        width: 1px;
        height: 50%;
        background: #fff;
      }
      .shop_message_box_right {
        height: 100%;
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .shop_message_box_right_list {
          height: 80%;
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          font-size: 0.6rem;
          .shop_message_box_right_top {
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}
.shop {
  height: 2rem;
  width: 100%;
  position: relative;
  background: #fff;
  .shop_box {
    position: absolute;
    left: 0;
    padding: 0 0.6rem;
    top: -1.5rem;
    height: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-left: 1rem;
    .shop_box_left {
      height: 100%;
      width: 3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 100%;
      }
    }
    .shop_box_right {
      height: 100%;
      width: calc(100% - 3rem);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      color: #fff;
      font-size: 0.9rem;
      flex-wrap: wrap;
      .shop_box_right_top {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 50%;
        img {
          height: 1rem;
          width: 1rem;
          margin-left: 0.2rem;
        }
      }
      .shop_box_right_bot {
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #888;
        position: relative;
        .shop_box_right_bot_box {
          font-size: 0.6rem;
        }
      }
    }
  }
}
.bottom_lev {
  height: 3rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0.7rem;
  color: #10aaff;
  display: flex;
  justify-content: center;
  align-items: center;
  .bottom_lev_box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img {
    height: 1rem;
    width: 1rem;
  }
}
</style>

